<!DOCTYPE html>
<html>

	<head>
		<style type="text/css">
			.outdiv {
				border: while 1px solid;
				padding: 8% 120px;
				border-radius: 15px;
			}
			td,th {
				padding: 5px 10px !important;
			}
			table{
				margin:50px auto;
			}
			.title {
				margin-bottom: 30px;
				font-size: 2em;
				border-bottom: 1px solid white;
				padding: 25px;
			}
			
			button {
				width: 8em;
			}
		</style>
		<meta charset="UTF-8">
		<title></title>
		<script src="../../js/jquery-2.0.0.min.js" type="text/javascript" charset="utf-8"></script>
 		<link rel="stylesheet" type="text/css" href="../../layui/css/layui.css" />
	</head>

	<body>
		<div class="outdiv">
			<div class="title">
				查找商品
			</div>
			<form >
				<div class="layui-form-item layui-form-pane">
					<label class="layui-form-label">请输入ID</label>
					<div class="layui-input-block">
						<input type="text" name="id" id="id" lay-verify="title" autocomplete="off" placeholder="请输入要查找的商品ID" class="layui-input">
					</div>
				</div>
				<div class="layui-input-block">
					<button id="ctlBtn" style="margin-top: 60px;" class="layui-btn" lay-submit lay-filter="formDemo">确认</button>
				</div>
			</form>

		</div>
	</body>

</html>
<script type="text/javascript">
	var str="<table id='tab' border='1px' cellpadding='0' cellspacing='0'><tr><th>id</th><th>bookname</th><th>price</th><th>title</th><th>amount</th><th>category</th><th>author</th><th>summary</th><th>imgsrc</th></tr></table>";
	$(document).ready(function() {
		$("#ctlBtn").click(function(){
		var dat= $("#id").serialize();
		$("body").html(str);
		$.ajax({
			url: "/Second_Project/dirbook",
			data:dat, 
			type: "post",
			dataType: "json",
			success: function(data) {
				console.log(data)
				/*这个方法里是ajax发送请求成功之后执行的代码*/
				showData(data); //我们仅做数据展示
			},
			error: function(msg) {
				console.log("error")
			}
		});
		//展示数据
		function showData(data) {
			var str = ""; //定义用于拼接的字符串
			for(var i = 0; i < data.length; i++) {
				//拼接表格的行和列
				str = "<tr><td>" + data[i].id + "</td><td>" + data[i].bookname +"</td><td>"+data[i].price+
					"</td><td>" + data[i].title + "</td><td>" + data[i].amount +
					"</td><td>" + data[i].category + "</td><td>" + data[i].author +
					"</td><td>" + data[i].summary + "</td><td>" + data[i].imgsrc +
					"</td></tr>";
				//追加到table中
				$("#tab").append(str);
			}
		}
	})
		})
</script>